import { ReactDOM } from 'react';
import { DragDropContext } from 'react-beautiful-dnd';
import { Droppable } from 'react-beautiful-dnd';
import { Draggable } from 'react-beautiful-dnd';
import TaskDrop from './task_drop';
import '../../css/drop.css'
import { useState } from 'react';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { add_kanban, kanban_order, kanban_selector, task_diff_order, task_same_order, update_kanban_async } from '../../../redux/slice/drop';
import { Input } from 'antd';
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useRef } from 'react'


function reorderList(list, startIndex, endIndex) {
    const result = Array.from(list);
    // debugger
    const [removed] = result.splice(startIndex, 1);
    // debugger
    result.splice(endIndex, 0, removed);
    // debugger
    return result;
}

function DropCp() {
    // const [drag_data, set_drag_data] = useState(result_data)
    const dispatch = useDispatch();
    const drag_data = useSelector(kanban_selector)
    const params = useParams()
    const project_id = params.id

    const data = useRef();
    // data.current.first = true;

    // console.log('xxxx', drag_data)
    useEffect(() => {
        if (!data.current) {
            data.current = true
            return
        }

        dispatch(update_kanban_async({
            project_id,
            kanban: drag_data
        }))

    }, [drag_data])



    function onDragEnd(result) {


        // console.log('result', result)
        // dispatch(update_kanban_async('xxxx'));

        if (!result.destination) {
            return;
        }

        if (result.type === 'kanban') {
            // const data = reorderList(
            //     drag_data,
            //     result.source.index,
            //     result.destination.index,
            // )
            dispatch(kanban_order({
                source: result.source.index,
                destination: result.destination.index,
            }))

            // console.log('data', data)
            // set_drag_data(data)
        }

        if (result.type === 'task') {
            // const new_grag_arr = Array.from(drag_data)

            if (result.source.droppableId === result.destination.droppableId) {

                // console.log(result.destination.droppableId)

                dispatch(task_same_order({
                    kanban_key: result.destination.droppableId,
                    source: result.source.index,
                    destination: result.destination.index,
                }))

                // const kanban = new_grag_arr.find((item) => {
                //     return item.kanban_key === result.destination.droppableId
                // })

                // let task_arr = kanban.task;
                // task_arr = reorderList(
                //     task_arr,
                //     result.source.index,
                //     result.destination.index,
                // )
                // kanban.task = task_arr
                // console.log(new_grag_arr)
                // set_drag_data(new_grag_arr)
            } else {
                // console.log(22222222)
                dispatch(task_diff_order({
                    source_kanban_key: result.source.droppableId,
                    destination_kanban_key: result.destination.droppableId,
                    source: result.source.index,
                    destination: result.destination.index,
                }))
            }
        }

        // console.log(result)
    }

    function input_keydown(e) {
        // console.log('eee', e)
        const value = e.target.value.trim();

        if (!value) {
            return;
        }

        dispatch(add_kanban({
            kanban_key: value
        }))
    }

    // 拖拽背景改变
    // function dragMouse() {
    //     let dragwarp_color = document.querySelector('.kanban_drag_wrap')
    //     // console.log(dragwarp_color.className)
    //     dragwarp_color.className = 'kanban_drag_wrap reseda'
    // }


    return (
        // DragDropContext代表的是整个 拖拽
        <DragDropContext
            onDragEnd={onDragEnd}
        >
            {/* Droppable是用来包裹拖拽的部分，Draggable代表的是拖拽部分 */}
            <Droppable direction="horizontal" droppableId="droppable-xxx" type="kanban">
                {(provided, snapshot) => (
                    <div
                        className='kanban_drop_wrap'
                        ref={provided.innerRef}
                        {...provided.droppableProps}
                    >
                        {drag_data.map((item, index) => {
                            // console.log(item, index)
                            return (
                                // horizontal代表横向 拖拽，该 Draggable表示的是一个看板的进度板块
                                <Draggable key={item.kanban_key} draggableId={item.kanban_key} index={index}>
                                    {(provided, snapshot) => {
                                        return (
                                            <div
                                                className='kanban_drag_wrap'
                                                ref={provided.innerRef}
                                                {...provided.draggableProps}
                                                {...provided.dragHandleProps}
                                            >
                                                <h2>{item.kanban_key}</h2>
                                                <TaskDrop task={item} />
                                            </div>
                                        )
                                    }}
                                </Draggable>
                            )
                        })}
                        <div className='kanban_drag_wrap'>
                            <Input onPressEnter={input_keydown} placeholder="新建看板名称" />
                        </div>
                        {provided.placeholder}
                    </div>
                )}
            </Droppable>
        </DragDropContext >
    )

}

export default DropCp;